<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>销量统计</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="assets/layui/css/layui.css" media="all" />
		<link rel="stylesheet" type="text/css" href="assets/css/all.css" media="all"/>
	</head
	<body>
		<div class="layui-fluid" >
			<div id="mainChart" style="width: 800px;height:400px;"></div>
		</div>
		<script src="assets/layui/layui.js" type="text/javascript"></script>
		<script src="assets/js/all.js" type="text/javascript"></script>
		<script type="text/javascript">
			layui.use(['table','layer','laypage','form'],function(){
				var table = layui.table,
					layer = layui.layer,
					laypage = layui.laypage,
					form = layui.form,
					$ = layui.$

				
			})
		</script>
		
		<script src="assets/js/echarts.js" type="text/javascript"></script>
		<script type="text/javascript">
	        // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('mainChart'));
	
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '销量统计',
	            },
	            tooltip: {
	            	trigger: 'axis'
	            },
	            legend: {
	                data: ["销量","会员数","报价次数"],
	            },
	            grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			    },
			    yAxis: {
			        type: 'value'
			    },
	            series: [
	            	{
			            name:'销量',
			            type:'line',
			            stack: '总量',
			            data:[120, 132, 101, 134, 90, 230, 210,101, 134, 90, 230, 210]
			        },
			        {
			            name:'会员数',
			            type:'line',
			            stack: '总量',
			            data:[220, 182, 191, 234, 290, 330, 310,191, 234, 290, 330, 310]
			        },
			        {
			            name:'报价次数',
			            type:'line',
			            stack: '总量',
			            data:[150, 232, 201, 154, 190, 330, 410,201, 154, 190, 330, 410]
			        }
	            ]
	        };
	
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
	    </script>
	</body>

</html>